/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <div class="music_detail">
    <div class="nav" :style='{ marginTop: `${ this.$store.state.topAvoidArea }px` }'>
      <DetailNav :deviceType="'mobile'" :musicId="musicId" :isPlay="isPlay"></DetailNav>
    </div>
    <div class="content">
      <div :class="['play_page', deviceType === 'mobile' ||
        (deviceType === 'tablet' && currentOrientation === 'portrait')
        ? 'play_page_mobile'
        : '']">
        <div v-show="deviceType !== 'tablet' ||
          (deviceType === 'tablet' && currentOrientation !== 'portrait')
          " :class="['artwork_icon', deviceType === 'mobile' ||
            (deviceType === 'tablet' && currentOrientation !== 'portrait')
            ? 'mobile_icon'
            : 'pc_icon',]">
          <TransformImg :imgSrcProp="transformImgUrl"></TransformImg>
        </div>
        <div class="tabletMusicInfo" v-show="deviceType === 'tablet' && currentOrientation === 'portrait'">
          <div class="tabletMusicName">
            <img src="../../assets/images/artwork.png" alt="" />
            <div class="name">
              <span>{{ oneMusic.name || '' }}</span>
              <span>{{ oneMusic.musicName || '' }}</span>
            </div>
          </div>
          <img src="../../assets/images/love_count.png" alt="" />
        </div>
        <div class="lyric_page" v-show="deviceType === 'tablet' && currentOrientation === 'portrait'">
          <span>此歌曲为纯音乐，请您欣赏</span>
        </div>
        <MusicInfo :oneMusic="oneMusic"></MusicInfo>
        <div class="play">
          <MusicPlayer :musicId="musicId" :isPlay="isPlay" @updateMusic="updateMusic" @updateIsPlay="updateIsPlay">
          </MusicPlayer>
        </div>
      </div>

      <div :class="[
        'lyric_page',
        deviceType === 'mobile' ||
          (deviceType === 'tablet' && currentOrientation === 'portrait')
          ? 'lyric_page_mobile'
          : 'lyric_page_pc',
      ]">
        <span>此歌曲为纯音乐，请您欣赏</span>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import DetailNav from '../../components/DetailNav/detailNav.vue';
import MusicPlayer from '../../components/Player/musicPlayer.vue';
import MusicInfo from '../../components/MusicInfo/musicInfo.vue';
import TransformImg from '../../components/TransformImg/transformImg.vue';

export default Vue.extend({
  components: {
    DetailNav,
    MusicPlayer,
    MusicInfo,
    TransformImg,
  },
  data() {
    return {
      transformImgUrl: require('../../assets/images/artwork.png'),
      musicList: [],
      isPlay: 0,
      musicId: 0,
      oneMusic: {},
      isMobile: true,
      deviceType: 'mobile',
      currentOrientation: 'landscape'
    };
  },
  mounted() {
    this.musicList = this.$store.state.musicList;
    this.oneMusic = this.musicList.find(item => item.id === this.musicId);
    this.isMobile = window.innerWidth < 500;

    this.updateScreenSize();
    window.addEventListener('resize', this.updateScreenSize);
    document.addEventListener('contextmenu', function (e) {
      e.preventDefault();
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateScreenSize);
    document.removeEventListener('contextmenu', function (e) {
      e.preventDefault();
    });
  },
  methods: {
    updateMusic(num) {
      this.oneMusic = this.musicList[num - 1];
      this.musicId = num;
    },
    updateIsPlay(num) {
      this.isPlay = num;
    },
    updateScreenSize() {
      if (window.innerWidth < 500 && window.innerHeight < 1000) {
        this.deviceType = 'mobile';
        this.isMobile = true;
      } else if (
        window.innerWidth > 500 &&
        window.innerWidth < 1000 &&
        window.innerHeight < 1000
      ) {
        this.deviceType = 'foldableScreen';
      } else if (window.innerWidth > 1350) {
        this.deviceType = 'pc';
        this.isMobile = false;
      } else {
        this.isMobile = false;
        if (screen.orientation.type.indexOf('landscape') >= 0) {
          this.currentOrientation = 'landscape';
        } else {
          this.currentOrientation = 'portrait';
        }
        this.deviceType = 'tablet';
      }
    }
  },
  created() {
    // 初始化路由参数
    this.isPlay = Number(this.$route.query.isPlay);
    this.musicId = Number(this.$route.query.musicId);
  },
});
</script>

<style lang="less" scoped>
@import "./index.less";
</style>